In this lesson, we'll take a look at the very simple desktop capture module, desktop capture is essentially
an electron module wrapper for the native HTML5 media device's API, allowing us to access screens so
monitors and application windows.
This module contains only one method to do that.
Get sources.
Let's see an example.
I'll add this to Renderer James first requiring this render a module from electron consed desktop.
Capture the structured.
Equals require electron.
Call that one method on this module, desktop capture, get sources, the first argument being a configuration
object in which we can specify what type of sources we want to get types this taking an array.
And in this array we can specify either screen window or both screen and window being the only two available
source types I'll say screen for now, get processed returns, a promise so resolved within passing
a callback that provides us one argument of sources being our screens as per the configuration.
I log that out so we can inspect it and note that as with any promise, you can also catch any potential
errors with a catch method on this promise object.
But I'll leave that out for now.
Save this.
And they're in the dev tools, we get an array with two entries being as I have two screens, my laptops
both in display and an external monitor, screen one and screen two.
I'll expand this dev to Spain a bit so we can see all the properties of these objects there.
And I'd name thumbnail of type native image, which we'll discuss in a minute, and another somewhat
generic screen ID.
So there's no real way of knowing which screen is which.
But the first will always be the primary.
In my case, my external monitor, the real useful bit of the screen object being the thumbnails.
These provide us an image of the screen when the source was requested.
I'll render this out in the app.
Content to demonstrate over to indexed HTML, add an image tag, leaving the source empty so we can
manually set it and giving this tag an ID with which to select it.
Screenshot.
And to not capture the screenshot immediately as the app is loading, which will be blank, of course,
add a button to trigger this with a signing, this an ID as well of screenshot button, say, get screen
shot, I'll copy the ID so we can attach an event listener to this button.
Document dot, get element by I.D., screenshot button, add event listener on click.
Adding a callback to run when this button is clicked in, which we can call this shorters function like
so this time, however, instead of just logging out, the sources will want to set the thumbnail of
the primary display, the first one to be displayed in that new image tag.
Select the image tag by its I.D. document, target element by I.D. Screenshot that we assigned it,
setting its source attribute to the thumbnail of the first item in sources index zero.
Now, as mentioned, this thumbnail image is an electron negative image, something we'll cover in more
detail in the shared modules section later on.
But basically an electron negative image is just a convenient instance of a class that allows us to
work better with images, for example, to get this thumbnail image in a data neutral format, meaning
we don't need to link to an actual file, but rather embed the image data directly into the image tag.
We can say thumbnail.
So that native image instant's calling to data neutral.
What we expect now when clicking this button is to get my two screens as saucers take the thumbnail
from the primary display being this one we are looking at and displaying it in this new image tag by
converting the image data to a data, you are all safe.
I'll close the dev tools.
And they're a rather small but nonetheless complete screenshot of my main display or screen, we can
also capture this thumbnail in a larger size back to the get sources options said thumbnail size to
a size object, an electron size object being a simple object with a width and height property, same
as we use to set the browser window size.
I'll make this thumbnail have a width of 19 twenty and a height of ten.
So capturing a standard 16 by nine aspect ratio.
And to stop this image from overflowing our app window, give it a width attribute of 100 percent safe
and renderer J.S..
I'll close the dev tools again.
Click, get screenshot.
And there this time capturing the new larger thumbnail size of this main screen.
The other source option I mentioned being window, thus allowing us to get the same for each open up
window on the user's machine, logging the sources out as well.
Save.
Click the get screenshot button again, this time getting a thumbnail image of the first window in the
sources array and there we see the main window being captured as that's my primary window at the moment,
or the focused window.
This one here, the first object this time around, the window name being the title of the window,
the other two windows being upside have opened on my secondary screen.
So an extremely straightforward module to use later will cover the native image, type in more detail
and also see how to get specific details about a display.